<template>
	<view style="background: #fafafa;" class="bgyxtabbar">
		<view @click="swithpage(item)" v-for="(item,k) in list" style="display: flex;flex-direction: column;flex: 1;align-items: center;">
			<view style="position: relative;">
				<u-badge type="error" :count="item.count" :offset="[5,5]"></u-badge>
				<image v-if="item.selected" :src="item.icons" style="width: 75rpx;height: 75rpx;border-radius: 16rpx;" mode=""></image>
				<image v-else :src="item.icon" style="width: 70rpx;height: 70rpx;border-radius: 16rpx;" mode=""></image>
			</view>
			<view class="">
				<!-- {{item.name}} -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {

			}
		},
		created() {
			uni.hideTabBar()
		},
		computed: {
			...mapState({
				list: (state) => {
					return state.tabbar.list
				}
			})
		},
		mounted() {
			
		},
		methods:{
			swithpage:function(item){
				console.log(item)
				uni.switchTab({
					url:item.path
				})
			}
		}
	}
</script>

<style scoped>
	.bgyxtabbar {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;
		padding-top: 10rpx;
		z-index: 9 ;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}
</style>